import React from "react";
import { Checkbox } from "antd";
import ItemInput from "../itemcomponent/ItemInput";
import AnnexConfig from "./AnnexConfig";
import { openNotificationWithIcon } from "../../../../../utils/comm";

class UploadConfig extends React.Component {
  constructor(props) {
    super(props);
    this.openNotificationWithIcon = openNotificationWithIcon.bind(this);
  }

  onCheckboxChange = e => {
    const multiple = e.target.checked;
    const { selectedItem = {}, onBlur } = this.props;
    const selectedItemParam = selectedItem.params || {};
    const obj = { multiple };
    const newParams = { ...selectedItemParam, ...obj };
    if (onBlur) onBlur("params", newParams);
  };

  render() {
    const {
      className = "",
      selectedItem = {},
      getInputViewValue = () => {},
      onChange = () => {},
      onBlur = () => {},
    } = this.props;
    const { params = {} } = selectedItem;

    return (
      <React.Fragment>
        <ItemInput
          className={className}
          label="提示信息："
          maxLength={15}
          value={getInputViewValue("placeholder", selectedItem.placeholder)}
          onChange={value => onChange("placeholder", value)}
          onBlur={value => {
            onBlur("placeholder", value, true);
          }}
        />

        <div className={className}>
          <Checkbox onChange={this.onCheckboxChange} checked={params.multiple}>
            允许上传多个附件
          </Checkbox>
        </div>
        <AnnexConfig
          className={className}
          selectedItem={selectedItem}
          onBlur={onBlur}
        />
      </React.Fragment>
    );
  }
}

export default UploadConfig;
